<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互用户操作表2</title>
		<script src="../js/axios.js"></script>
		<script src="../js/vue.js"></script>
		<style>
		.a{
			width: 200px;
		}
		</style>
	</head>
	<body>
		<div id="app">
			<a name="_top"></a>
			<table width="1000px" border="1px" bordercolor="blue" align="center">
				<tr>
					<th><input type="text"placeholder="编号(系统定义)"disabled/></th>
					<th><input type="text"placeholder="姓名" class="a"v-model="inuser.name"/></th>
					<th><input type="text"placeholder="年龄"class="a"v-model="inuser.age"/></th>
					<th><input type="text"placeholder="性别"class="a"v-model="inuser.sex"/></th>
					<th><a href="#_floor"><button @click="insertOne()">添加用户</button></a></th>
				</tr>
				<tr>
					<a name="_up"></a>
					<th><input type="text"placeholder="编号(不可更改)"v-model="upuser.id" disabled/></th>
					<th><input type="text"placeholder="姓名"class="a"v-model="upuser.name"/></th>
					<th><input type="text"placeholder="年龄"class="a"v-model="upuser.age"/></th>
					<th><input type="text"placeholder="性别"class="a"v-model="upuser.sex"/></th>
					<th><button @click="updateOne()">修改信息</button></th>
				</tr>
				<tr>
					<th colspan="5"><h3>用户列表</h3></th>
				</tr>
				<tr>
					<th>编号</th>
					<th>名字</th>
					<th>年龄</th>
					<th>性别</th>
					<th>修改/删除</th>
				</tr>
				<tr v-for="user in userList">
					<th v-text="user.id"></th>
					<th v-text="user.name"></th>
					<th v-text="user.age"></th>
					<th v-text="user.sex"></th>
					<th width="100px">
					<a href="#_up"><button @click="echo(user)">修改</button></a>	
						<button @click="deleteOne(user)">删除</button>
					</th>
				</tr>
			</table>
			<div align="center"><a href="#_top"><button>回到顶部</button> </a></div> 
		<a name="_floor"></a>
		</div>
		<script>
		axios.defaults.baseURL="http://localhost:8080/user"
		const app = new Vue({
			el:"#app",
			data:{
				userList:[],
				upuser:{
					id:'',
					name:'',
					age:'',
					sex:''
				},
				inuser:{
					name:'',
					age:'',
					sex:''
				}
			},
			methods:{
				async selectAll(){
					let {data:all} = await axios.get("/selectAll")
					this.userList=all
				},
				echo(user){
					this.upuser.id=user.id
					this.upuser.name=user.name
					this.upuser.age=user.age
					this.upuser.sex=user.sex
					this.selectAll()
				},
				async deleteOne(user){
					let {data:del} = await axios.delete(`/deleteOne/${user.id}`)
					alert(del)
					this.selectAll()
				},
				async insertOne(){
					let {data:ins} = await axios.post("/insertOne",this.inuser)
					alert(ins)
					this.selectAll()
					this.inuser={}
				},
				async updateOne(){
					let {data:up} = await axios.put("/updateOne",this.upuser)
					alert(up)
					this.selectAll()
					this.upuser={}
				}
			},
			mounted() {
				this.selectAll()
			}
		})
		</script>
	</body>
</html>
